<!--
 * @Author: JohnYang
 * @Date: 2020-09-23 09:50:56
 * @LastEditors: JohnYang
 * @LastEditTime: 2020-09-30 22:02:49
-->
<template>
  <div class="view">
    <div class="btn-title">
      <el-button type="danger" class="btn-normal" @click="handleCreate"
        >新增</el-button
      >
      <el-button type="warning" class="btn-normal" @click="handleBatchDel"
        >批量删除</el-button
      >
    </div>
    <el-form label-width="80px">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="报案时间:">
            <form-control
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              clearable
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="search.reportTime"
              :style="{ width: '100%' }"
              placeholder="搜索报案时间"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="理赔编号:">
            <form-control
              type="input"
              clearable
              v-model.trim="search.num"
              placeholder="搜索理赔编号"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户姓名:">
            <form-control
              type="input"
              clearable
              v-model.trim="search.userName"
              placeholder="搜索客户姓名"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区域:">
            <form-control
              type="select"
              :options="regions"
              clearable
              v-model="search.region"
              placeholder="搜索区域"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车行:">
            <form-control
              type="input"
              clearable
              v-model.trim="search.dealerName"
              placeholder="搜索车行"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="质保产品:">
            <form-control
              type="select"
              clearable
              :options="qualityProducts"
              v-model="search.qualityProduct"
              placeholder="搜索质保产品"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品牌:">
            <form-control
              type="select"
              :options="brands"
              clearable
              v-model="search.brand"
              @change="handleChange"
              placeholder="搜索品牌"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型:">
            <form-control
              type="select"
              clearable
              v-model="search.vehicleModel"
              :options="CarSubOptions"
              placeholder="搜索车型"
            ></form-control>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button
              type="danger"
              size="small"
              class="btn-normal"
              @click="handleSearch"
              >查询</el-button
            >
            <el-button
              type="default"
              size="small"
              class="btn-normal"
              @click="handleReset"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <base-table
      ref="table"
      @selection-change="handleSelection"
      :config="config"
      :columns="columns"
    ></base-table>
  </div>
</template>

<script>
import { getCompensateList, deleteCompensate } from "@/api";
import { StorageMixin } from "@/mixins/storage.js";
import { RenderMixin } from "@/mixins/render.js";
export default {
  name: "CompensateView",
  mixins: [RenderMixin, StorageMixin],
  mounted() {
    this.reloadTable(true);
  },
  methods: {
    handleChange() {
      this.CarSubOptions = [];
      this.search.vehicleModel = "";
      let brand = this.search.brand;
      this.CarSubOptions = this.getCarsByBrand(brand);
    },
    handleSelection(selection) {
      this.selection = selection;
    },
    reloadTable(back2first) {
      this.table && this.table.reload(back2first);
    },
    handleCreate() {
      this.$router.push({
        name: "CompensateDetail",
        query: {
          edit: false
        }
      });
    },
    handleSearch() {
      this.reloadTable();
    },
    handleReset() {
      Object.assign(this.search, {
        reportTime: [],
        num: "",
        userName: "",
        region: "",
        dealerName: "",
        qualityProduct: "",
        brand: "",
        vehicleModel: ""
      });
      this.reloadTable(true);
    },
    handleEdit(row) {
      this.$router.push({
        name: "CompensateDetail",
        query: {
          id: row.id,
          edit: true
        }
      });
    },
    handleDelete(row) {
      this.$interaction.showConfirm({
        message: "确定要删除当前项目吗?",
        confirmed: async () => {
          try {
            let resp = await deleteCompensate(row.id);
            if (resp && resp.code == 0) {
              this.$interaction.showSuccess("删除成功!");
              this.reloadTable(true);
            } else {
              this.$interaction.showError("删除失败!");
            }
          } catch (exp) {
            console.error(exp);
          }
        }
      });
    },
    async handleBatchDel() {
      if (!Array.isArray(this.selection) || !this.selection.length) {
        this.$interaction.showWarning("请选择要删除的数据!");
        return;
      }
      try {
        let ids = this.selection.map(x => x.id);
        let resp = await deleteCompensate(ids.join(","));
        if (resp && resp.code == 0) {
          this.$interaction.showSuccess("删除成功!");
          this.reloadTable(true);
        } else {
          this.$interaction.showError("删除失败!");
        }
      } catch (exp) {
        console.error(exp);
      }
    },
    reshapeData(list) {
      return list.map(x => {
        return {
          ...x,
          repairImgs: (x.repairImgs || "").split(",").filter(x => x !== "")
        };
      });
    }
  },
  computed: {
    table() {
      return this.$refs.table;
    }
  },
  data() {
    var _this = this;
    return {
      CarSubOptions: [],
      search: {
        reportTime: [],
        num: "",
        userName: "",
        region: "",
        dealerName: "",
        qualityProduct: "",
        brand: "",
        vehicleModel: ""
      },
      config: {
        lazyLoad: true,
        selection: true,
        getData: async ({ pageSize, pageNum }) => {
          let result = {
            total: 0,
            data: []
          };
          try {
            let resp = await getCompensateList({
              pageSize,
              pageNum,
              ...this.search,
              start:
                Array.isArray(this.search.reportTime) &&
                this.search.reportTime[0]
                  ? this.renderDate(this.search.reportTime[0])
                  : undefined,
              end:
                Array.isArray(this.search.reportTime) &&
                this.search.reportTime[1]
                  ? this.renderDate(this.search.reportTime[1])
                  : undefined
            });
            if (resp && resp.data) {
              result.data = this.reshapeData(resp.data.list);
              result.total = resp.total;
            } else {
              this.$interaction.showError("获取数据失败!");
            }
          } catch (exp) {
            console.error(exp);
          }
          return result;
        }
      },
      columns: {
        reportTime: {
          label: "报案时间",
          width: "120px",
          align: "center",
          formatter(val) {
            return _this.renderDate(val);
          }
        },
        num: {
          label: "理赔编号",
          width: "120px",
          align: "center"
        },
        brand: {
          label: "品牌",
          width: "125px",
          align: "center",
          formatter(val) {
            return _this.renderBrand(val);
          }
        },
        vehicleModel: {
          label: "车型",
          minWidth: "150px",
          formatter(val) {
            return _this.renderVehicleModel(val);
          },
          align: "center"
        },
        userName: {
          label: "客户姓名",
          width: "100px",
          align: "center"
        },
        telephone: {
          label: "客户电话",
          width: "120px",
          align: "center"
        },
        region: {
          label: "质保所在区域",
          width: "150px",
          formatter(val) {
            return _this.renderRegion(val);
          },
          align: "center"
        },
        dealerName: {
          label: "质保提供车行",
          width: "150px",
          align: "center"
        },
        qualityProduct: {
          label: "质保产品",
          width: "100px",
          align: "center",
          formatter(val) {
            return _this.renderProduct(val);
          }
        },
        vehicleBug: {
          label: "问题",
          width: "200px",
          align: "center"
        },
        process: {
          label: "跟进过程",
          width: "200px",
          align: "center"
        },
        result: {
          label: "处理结果",
          width: "200px",
          align: "center"
        },
        repairImgs: {
          label: "维修照片",
          width: "100px",
          align: "center",
          render(h, row) {
            var imgs = row.repairImgs;
            if (!Array.isArray(imgs) || imgs.length <= 0) {
              return <span>暂无图片</span>;
            }
            var url = imgs[0];
            return <el-image src={url} preview-src-list={imgs}></el-image>;
          }
        },
        operation: {
          label: "操作",
          width: "140px",
          align: "center",
          render(h, row) {
            return (
              <div>
                <el-button
                  type="danger"
                  size="mini"
                  on-click={() => {
                    _this.handleEdit(row);
                  }}
                >
                  编辑
                </el-button>
                <el-button
                  type="warning"
                  size="mini"
                  on-click={() => {
                    _this.handleDelete(row);
                  }}
                >
                  删除
                </el-button>
              </div>
            );
          }
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.btn-title {
  margin-bottom: 20px;
}
</style>
